<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="/static/js/app/workspace/mescroll/mescroll.css">
    <link rel="stylesheet" href="/static/css/app/workspace/billDetail/billDetail.css">
    <script src="/static/js/app/workspace/jquery.min.js"></script>
    <script src="/static/js/app/workspace/flexible.js"></script>
    <script src="/static/js/app/workspace/init.js"></script>
    <script src="/static/js/app/workspace/util.js"></script>
    <script src="/static/js/app/workspace/mescroll/mescroll.js"></script>
    <!--<script src="../js/common/iscroll.js"></script>-->
    <script src="/static/js/app/workspace/common/navbarscroll.js"></script>
    <script src="/static/js/app/workspace/common/iscroll-probe.js"></script>
    <title>账单明细</title>
    <style>
        iframe:not(.huakai_iframe) {display:none !important;}
        * { touch-action: pan-y; }
        ::-webkit-scrollbar {
            display: none;/*隐藏滚轮*/
        }
        .billDetail .bill-contain .mescroll{
            position: fixed;
            top: 1.3rem;
            bottom: 0;
            height: auto;
            background: #eee;
        }
        .billDetail .bill-contain .mescroll .mescroll-upwarp{
            min-height:0.5rem;
            padding: 0;
        }
        .hide{display: none}
        html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    </style>
</head>
<body>
<script src="/static/js/common/Monitor.js"></script>
<div class="billDetail">
    <div id="billBar">
        <div class="bill-top header scroller" id="wrapper">
            <ul class="navigationBar nav">
                <li data-billType="0" data-cls="all" data-page="1">全部</li>
                <li data-billType="1" data-cls="video" data-page="1">视频</li>
                <li data-billType="2" data-cls="gift" data-page="1">礼物</li>
                <li data-billType="3" data-cls="recharge" data-page="1">充值</li>
                <li data-billType="4" data-cls="putForward" data-page="1">提现</li>
                <li data-billType="5" data-cls="privateLetter" data-page="1">私信</li>
                <li data-billType="6" data-cls="recommendation" data-page="1">推荐提成</li>
                <!-- 新增 -->
                <li data-billType="8" data-cls="voiceDynamics" data-page="1">语音动态</li>
                <li data-billType="9" data-cls="notesExchange" data-page="1">小纸条兑换</li>
                <li data-billType="10" data-cls="groupHair" data-page="1">群发</li>
                <li data-billType="11" data-cls="hidden" data-page="1">隐藏足迹</li>
                <li data-billType="12" data-cls="reward" data-page="1">悬赏</li>

            </ul>
        </div>
    </div>
    <div class="bill-contain " >
        <div id="mescroll0" class="mescroll hide">
            <ul id="dataList0" class="all"></ul>
        </div>
        <div id="mescroll1" class="mescroll hide">
            <ul id="dataList1" class="video"></ul>
        </div>
        <div id="mescroll2" class="mescroll hide">
            <ul id="dataList2" class="gift"></ul>
        </div>
        <div id="mescroll3" class="mescroll hide">
            <ul id="dataList3" class="recharge"></ul>
        </div>
        <div id="mescroll4" class="mescroll hide">
            <ul id="dataList4" class="putForward"></ul>
        </div>
        <div id="mescroll5" class="mescroll hide">
            <ul id="dataList5" class="privateLetter"></ul>
        </div>
        <div id="mescroll6" class="mescroll hide">
            <ul id="dataList6" class="recommendation"></ul>
        </div>
        <!-- 新增 -->
        <div id="mescroll7" class="mescroll hide">
            <ul id="dataList7" class="voiceDynamics"></ul>
        </div>
        <div id="mescroll8" class="mescroll hide">
            <ul id="dataList8" class="notesExchange"></ul>
        </div>
        <div id="mescroll9" class="mescroll hide">
            <ul id="dataList9" class="groupHair"></ul>
        </div>
        <div id="mescroll10" class="mescroll hide">
            <ul id="dataList10" class="hidden"></ul>
        </div>
        <div id="mescroll11" class="mescroll hide">
            <ul id="dataList11" class="reward"></ul>
        </div>
    </div>
    <div class="bill-mask hide">
        <div class="mask-con">
            <p>确定删除该条账单？</p>
            <div>
                <span class="cansule">取消</span>
                <span class="deletes">删除</span>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var H=window.innerHeight;$(".billDetail").css("height",H);
        var accessId = getParameter("x-access-id");
        var accessToken = getParameter("x-access-token");
        var databilltype=getParameter("databilltype");
        var ua = "h5";
        var defaultPage=1;
        var defaultSize=15;

        // 设置一个开关
        var check=false;

        //判断参数是否都有值
        if(!(accessId && accessToken && databilltype != null && databilltype!="" && databilltype!="null")){
            $(".bill-top,.loading").hide();
            $(".bill-contain").css("margin-top",0);
            $(".bill-contain").hide();
        }
//        判断是否是测试环境还是普通账号

        checkTest();

        function checkTest(){
            $.ajax({
                url: genUrl("/customer/findCustomerInfo"),
                type: 'GET',
                contentType:"application/json",
                headers:{
                    "x-access-id":accessId ,
                    "x-access-token": accessToken,
                    "x-ua": ua
                },
                data: {"customerId":accessId},
                dataType: 'json',
                async: false,
                success: function (res) {
                    if(res.code!=0){
                        alert(res.message);
                        $(".bill-top,.loading").hide();
                        $(".bill-contain").css("margin-top",0);
                        return;
                    }
                    var hktc=res.data.hktc;
                    if(hktc != 0){
                        // 是测试账号的将开关开启
                        check=true;
                        databilltype=0;
                        $(".nav").find("li").hide();
                        $(".nav").find("li").removeClass("active");
                        $(".nav").find("li").eq(0).show();
                        $(".nav").find("li").eq(2).show();
                        $(".nav").find("li").eq(3).show();
                        $(".nav").find("li").eq(0).addClass("active");
                        $(".bill-contain").find("ul").eq(3).show();
                        $(".bill-contain").find("ul").eq(2).show();
                        $ (".nav>li").eq(0).css("width","3.3rem");
                        $ (".nav>li").eq(2).css("width","3.3rem");
                        $ (".nav>li").eq(3).css("width","3.3rem");
                    }
                }
            });
        }
        //插件写入
        var curNavIndex=0;//首页0; 奶粉1; 面膜2; 图书3;
       // var mescrollArr=new Array(7);//4个菜单所对应的4个mescroll对象
        <!-- 新增 -->
       var mescrollArr=new Array(12);//4个菜单所对应的4个mescroll对象
        //初始化首页
//        mescrollArr[0]=initMescroll("mescroll0", "dataList0");

        /*初始化菜单*/
        $(".nav li").click(function(){
            var i=Number($(this).index());
            //更改列表条件
            $(".nav .active").removeClass("active");
            $(this).addClass("active");
            //隐藏当前列表
            $("#mescroll"+curNavIndex).hide();
            //显示对应的列表
            curNavIndex=i;
            $("#mescroll"+curNavIndex).show();
            //取出菜单所对应的mescroll对象,如果未初始化则初始化
            if(mescrollArr[i]==null) mescrollArr[i]=initMescroll("mescroll"+i, "dataList"+i);

        })
        if(Number(databilltype) != null){
            //模拟点击事件新谮
            if (databilltype>6){
                databilltype--;
            }
            $(".nav li").eq(Number(databilltype)).trigger('click');
        }

        /*创建MeScroll对象*/
        function initMescroll(mescrollId,clearEmptyId){
            //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
            var mescroll = new MeScroll(mescrollId, {
                //上拉加载的配置项
                // down:{
                //     auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
                //     callback: downCallback, //下拉刷新的回调
                // },
                up: {
                    callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
                    noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    empty: {
                        icon: "../img/null.png", //图标,默认null
                        tip: "暂无相关数据~" //提示
                        // btntext: "去逛逛 >", //按钮,默认""
                        // btnClick: function(){//点击按钮的回调,默认null
                        //     alert("点击了按钮,具体逻辑自行实现");
                        // }
                    },
                    clearEmptyId: clearEmptyId //相当于同时设置了clearId和empty.warpId; 简化写法;默认null
                }
            });
            return mescroll;
        }

        /*下拉刷新的回调 */
        // function downCallback(){
        //     console.log("aa")
        // }
        /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function getListData(page){
            //联网加载数据
            getListDataFromNet(curNavIndex,page.num-1, function(data){
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                mescrollArr[curNavIndex].endSuccess(data.length);//传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                //设置列表数据
                setListData(data);
                if(data.length){
                    page.num=data[data.length-1].walletBillId;
                }
            }, function(){
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescrollArr[curNavIndex].endErr();
            });
        }
        /*设置列表数据*/
        function setListData(data){
            var str="";
            var listDom=$("#dataList"+curNavIndex);
            if(data){
                for(var i=0;i<data.length;i++){
                    // 判断 在测试账号下，并且是显示所有账单
                    if(check && curNavIndex==0){
                        console.log(data[i])

                        // 只留礼物和充值账单
                        if(data[i].billType==2 ||data[i].billType==3){
                            str+='<li class="items">';
                            str+='<div>';
                            str+='<h1>'+data[i].description+'</h1>';
                            str+='<i>'+getMyDate(data[i].createTime)+'</i>';
                            str+='</div>';
                            var cls=data[i].coin >0 ? "blue" : "red";
                            var coin=data[i].coin >0 ? "+"+data[i].coin :data[i].coin;
                            if(data[i].billType==9 || data[i].billType==10){
                                if(data[i].needShow){
                                    //  账单新增余额展示信息
                                    str+='<p><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>小纸条</span></p><p><span style="margin-right: 0; color: #3C90EB;    font-size: 0.33rem;">余额: </span><b style="margin-right: 0; color: #3C90EB;    font-size: 0.33rem;">'+parseFloat(data[i].coinAfter).toFixed(2)+'</b><span style="color: #3C90EB;    font-size: 0.33rem;">小纸条</span></p>';
                                }else{
                                    str+='<p style="top:0.4rem"><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>小纸条</span></p>';
                                }
                               // str+='<p style="top:0.4rem"><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>小纸条</span></p>';
                            }else{
                                if(data[i].needShow){
                                    str+='<p><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>花瓣</span></p><p><span style="margin-right: 0; color: #3C90EB;    font-size: 0.33rem;">余额: </span><b style="margin-right: 0; color: #3C90EB;font-size: 0.33rem;">'+parseFloat(data[i].coinAfter).toFixed(2)+'</b><span style="color: #3C90EB;    font-size: 0.33rem;">花瓣</span></p>';
                                }else{
                                    str+='<p style="top:0.4rem"><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>花瓣</span></p>';
                                }
                               // str+='<p style="top:0.4rem"><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>花瓣</span></p>';
                            }
                            str+='</li>';
                        }
                    }else{
                        str+='<li class="items">';
                        str+='<div>';
                        str+='<h1>'+data[i].description+'</h1>';
                        str+='<i>'+getMyDate(data[i].createTime)+'</i>';
                        str+='</div>';
                        str+='<div style="float: right;width: 40%;margin-left: 0">';
                        var cls=data[i].coin >0 ? "blue" : "red";
                        var coin=data[i].coin >0 ? "+"+data[i].coin :data[i].coin;
                        if(data[i].billType==9 || data[i].billType==10){
                            if(data[i].needShow){
                                //  账单新增余额展示信息
                                str+='<p><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>小纸条</span></p><p><span style="margin-right: 0; color: #3C90EB;    font-size: 0.33rem;">余额: </span><b style="margin-right: 0; color: #3C90EB;    font-size: 0.33rem;">'+parseFloat(data[i].coinAfter).toFixed(2)+'</b><span style="color: #3C90EB;    font-size: 0.33rem;">小纸条</span></p>';
                            }else{
                                str+='<p style="top:0.25rem"><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>小纸条</span></p>';
                            }
                          // str+='<p style="top:0.25rem"><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>小纸条</span></p>';
                        }else{
                            if(data[i].needShow){
                                str+='<p><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>花瓣</span></p><p><span style="margin-right: 0; color: #3C90EB;    font-size: 0.33rem;">余额: </span><b style="margin-right: 0; color: #3C90EB;font-size: 0.33rem;">'+parseFloat(data[i].coinAfter).toFixed(2)+'</b><span style="color: #3C90EB;    font-size: 0.33rem;">花瓣</span></p>';
                            }else{
                                str+='<p style="top:0.25rem"><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>花瓣</span></p>';
                            }
                         // str+='<p style="top:0.25rem"><b class="'+cls+'">'+parseFloat(coin).toFixed(2)+'</b><span>花瓣</span></p>';
                        }
                        str+='</div>';
                        str+='</li>';
                    }

                }
                listDom.append(str);
            }else{
                console.log("数据加载失败");
            }
        }


        /*联网加载列表数据*/
        function getListDataFromNet(curNavIndex,pageNum,successCallback,errorCallback) {
            // 新增
            if(curNavIndex>6){
                curNavIndex++;
            }
            //延时一秒,模拟联网
            setTimeout(function () {
                $.ajax({
                    url: genUrl("/wallet/getBillList/v2"),
                    type: 'GET',
                    contentType:"application/json",
                    headers:{
                        "x-access-id":accessId ,
                        "x-access-token": accessToken,
                        "x-ua": ua
                    },
                    data: {"beginId":pageNum,"walletBillType":curNavIndex},
                    dataType: 'json',
                    async: false,
                    success: function(data){
                        if(data.code=="0"){
                            var data=data.data.list;
                            var listData=data;
                            //回调
                            successCallback(listData);
                        }
                    },
                    error: errorCallback
                });
            },100)
        }
        //禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
        document.ondragstart=function() {return false;}
        // 时间戳转换过程
        function getMyDate(str){
            var oDate = new Date(str),
                oYear = oDate.getFullYear(),
                oMonth = oDate.getMonth()+1,
                oDay = oDate.getDate(),
                oHour = oDate.getHours(),
                oMin = oDate.getMinutes(),
                oSen = oDate.getSeconds(),
                oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
            return oTime;
        };
        function getzf(num){
            if(parseInt(num) < 10){
                num = '0'+num;
            }
            return num;
        }

        $('#billBar').navbarscroll({
            defaultSelect:Number(databilltype),//初始选中第几个
             scrollerWidth:3,
            // fingerClick:0,
            endClickScroll:function(obj){
                //回调

            }
        });
        // // 长按账单删除
        // $(document).on({
        //     touchstart:function(e){
        //         console.log($(this));
        //         var index = $(this).index();
        //         timeOutEvent = setTimeout("longPress("+index+")",500);
        //         e.preventDefault();
        //     },
        //     touchmove:function(){
        //         clearTimeout(timeOutEvent);
        //         timeOutEvent = 0;
        //     },
        //     touchend:function(){
        //         clearTimeout(timeOutEvent);
        //         // if(timeOutEvent!=0){
        //         //     alert('你这是点击，不是长按');
        //         // }
        //         return false;
        //     }
        // }, ".items");
        // //  取消
        // $(".cansule").click(function () {
        //     $(".bill-mask").addClass("hide");
        // })
        // // 确定删除
        // $(".deletes").click(function () {
        //     $(".bill-mask").addClass("hide");
        //     console.log("确定删除")
        // })
    });
    // function longPress(t){
    //     console.log(t)
    //    $(".bill-mask").removeClass("hide");
    // }
</script>

</body>
</html>